<div class="content-heading">
    <div>
        💻 {{ 'general.clients' | translate }} - <b>Edit</b>
        <small><b> {{ 'client.ClientDescription' | translate }}.</b></small>
    </div>
</div>

<app-loading *ngIf="model == null || showButtonLoading"></app-loading>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>

<div class="card card-default" *ngIf="model">
    <div class="card-header">
        <h3><img *ngIf="model.logoUri" width="150" [src]="model.logoUri" />&nbsp;{{model.clientName}}</h3>
    </div>
    <div class="card-body">
        <tabset>
            <tab [heading]="'client.details.basic' | translate">
                <app-client-basic [model]="model"></app-client-basic>
            </tab>
            <tab [heading]="'client.details.settings' | translate">
                <app-client-settings [model]="model"></app-client-settings>
            </tab>
            <tab [heading]="'client.details.auth' | translate ">
                <app-client-auth [model]="model"></app-client-auth>
            </tab>
            <tab [heading]="'client.details.token' | translate">
                <app-client-token [model]="model"></app-client-token>
            </tab>
            <tab [heading]="'client.details.deviceFlow' | translate">
                <app-client-device-flow [model]="model"></app-client-device-flow>
            </tab>
        </tabset>
    </div>
    <div class="card-footer">
        <button class="mb-1 btn btn-primary" (click)="update()" type="button">Save</button>
        <a class="mb-1 btn btn-secondary" [routerLink]="['/clients']">Cancel</a>
    </div>
</div>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>